<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<title>Meeting History (Beta)</title>
<r:require modules="PlUpload, TinyMCE" />
</head>
<body>
	<div class="container">
		<div class="data-grid-item">
			<div id="add-new-meeting" class="inner-data-grid-item">
				<p class="lead">ADD NEW MEETING</p>
				<div class="row">
					<div class="span5 pull-left">
						<label>Meeting Video Submit Method</label> <select
							name="videoMeetingMethod" class="input-block-level">
							<option value="upload">Upload Meeting</option>
							<option value="record">Record Meeting (Experimental)</option>
						</select>
						<div id="video-section-wrapper">
							<div class="upload-message">
								<div id="upload-alert" class="alert alert-info text-center">
									<p>File extension allowed: .mp4, webm</p>
									<p>No files in queue, you can choose file for upload.</p>
								</div>
							</div>
							<div id="upload-container"></div>
							<p>
								<input type="button" value="Choose file to upload"
									id="meeting-choosefiles" class="btn btn-primary btn-block">
							</p>
						</div>


					</div>
					<div class="span6 pull-right">
						<g:form name="meeting" action="addMeeting" controller="Meeting"
							method="GET">
							<label>Type Of Meeting</label>
							<select id="meeting-type" class="span6 select-block"
								name="meeting-type">
								<option value="Daily Meeting" selected="selected">Daily
									Meeting</option>
								<option value="Planning Meeting 1">Planning Meeting 1</option>
								<option value="Planning Meeting 2">Planning Meeting 2</option>
								<option value="Review Meeting">Review Meeting</option>
								<option value="Retrospective Meeting">Retrospective
									Meeting</option>
							</select>
							<label>Meeting Location</label>
							<select id="meeting-location" class="span6 select-block"
								name="meeting-location">
								<option value="Kanban" selected="selected">Kanban</option>
								<option value="Meeting Room">Meeting Room</option>
								<option value="Online Conference">Online Conference</option>
							</select>
							<label>Description</label>
							<p>
								<textarea id="meeting-description" class="input-block-level"
									name="meeting-description"></textarea>
							</p>
							<input id="meeting-submit" name="meeting-submit" type="submit"
								class="btn btn-info pull-right" value="Submit Meeting" />
						</g:form>

					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
	jQuery(document).ready(function( $ ) {
		
		var uploader = new plupload.Uploader({
			runtimes : 'gears,html5,silverlight,flash',
			browse_button : 'meeting-choosefiles',
			container : 'upload-container',
			url : '${createLink(controller: 'Meeting', action : 'upload')}',
			max_file_size : '1gb',
			flash_swf_url : '${resource(dir : '/libs/plupload', file : 'plupload.flash.swf')}',
			silverlight_xap_url : '${resource(dir : '/libs/plupload', file : 'plupload.silverlight.xap')}',
			filters : [{
				title : "Video Files",
				extensions : "mp4,webm"
			}],
			multiple_queues : false,
		    multi_selection : false,
		    file_data_name : 'meetingVideo'
		});
		
		

		uploader.bind('Init', function(up, params) {
			// Hides the upload-container for preventing the footer from display incorrect.
			$("#upload-container").hide();
		});

		// Start uploader script
		uploader.init();
		
		// When file is added
		uploader.bind('FilesAdded', function(up, files) {
			$("#upload-alert").hide();
			if(uploader.files.length > 1) {
				uploader.removeFile(uploader.files[0]);
				uploader.refresh();
			}
			$.each(files, function(i,file) {
				// Create new upload-progress wrapper
				var divUploadProgress = $("<div id='"+file.id+"' class='upload-progress'></div>");

				// Upload Info, Progress Bar, Remove
				var divUploadInfo = $("<div class='row'><p id='file-name' class='pull-left span4'>"+file.name+" (<a id='remove-"+file.id+"' href='#'><i class='fui-cross'></i></a>)</p><p id='upload-status' class='text-right pull-right span1'>Ready</p></div>");
				var divProgressBar = $("<div class='progress'><div id='progress-bar' class='bar bar-info'></div></div>");

				// Add them to upload-progress wrapper
				$(divUploadProgress).append(divUploadInfo).append(divProgressBar);

				// Add upload-progress wrapper to upload-container
				$("#upload-container").append(divUploadProgress);
				
			});
			$("#upload-container").show();
		});

		
		
		uploader.bind('BeforeUpload', function(up,file) {
			$("#"+file.id).find("#upload-status").addClass("text-info").text("Uploading");
		});
		
		// Uploader progress
		uploader.bind('UploadProgress', function(up,file) {
			// Update Progress
			$("#"+file.id).find("#file-name").html(file.name+" ("+file.percent+"%)");
			$("#"+file.id).find("#progress-bar").css("width",file.percent+"%");
		});

		uploader.bind('FileUploaded', function(up,file) {
			$("#"+file.id).find("#upload-status").removeClass("text-info").addClass("text-success").text("Finished");
		});

		uploader.bind('FilesRemoved',function(up,files) {
			// Fade out and remove file item in upload container
			$("a[id^='remove-"+files[0].id+"']").parents(".upload-progress").fadeOut(function(){
				$(this).remove();
			});

			if(uploader.files.length == 0)
			{
				if($("#upload-alert").hasClass("alert-error"))
				{
					$("#upload-alert").removeClass("alert-error").addClass("alert-info");
				}
				$("#upload-alert").html("<p>File extension allowed: .mp4, webm</p><p>No files in queue, you can choose file for upload.</p>");
				$("#upload-alert").show();
				
			}
			
		});

		uploader.bind('Error', function(up, error) {
			$("#upload-alert").removeClass("alert-info").addClass("alert-error").text(error.message).show();
		});

		$("#upload-container").on("click","a[id^='remove-']", function() {
			// Find file ID
			var fileID = $(this).attr("id").split("-")[1];
			// Remove file
			uploader.removeFile(uploader.getFile(fileID));
			return false;
		});

		uploader.bind("UploadComplete", function(up,files) {
			$(location).attr("href","<g:createLink controller='meeting' action='index' />");
		});
		
		$("#meeting-submit").bind("click", function() {
			if(uploader.files.length != 0)
			{
				// Disable all input fields
				$("[id^='meeting-']").prop("disabled",true);
	
				//create new meeting through ajax
				var addMeetingController = "${createLink(controller: 'Meeting', action : 'addMeeting')}";
	
				
				$.post(addMeetingController,{ 
						"meeting-type" : $("#meeting-type").val(),
						"meeting-location" : $("#meeting-location").val(),
						"meeting-description" : $("#meeting-description").val()
					}).done(function(data) {
							uploader.settings.multipart_params = {
									'meetingId' : data.meeting.id
							}
							uploader.start();
				});
			} else {
				$("#upload-alert").removeClass("alert-info").addClass("alert-error").text("No file in queue.").show();
			}
			
			return false;
		});

		// TinyMCE config
		$("#meeting-description").tinymce({	
			theme : 'simple',
			script_url : '${resource(dir : '/libs/tinymce', file : "tiny_mce.js")}'
		});
	});
 


	
	
</script>
</body>
</html>